<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <link href="https://at.alicdn.com/t/c/font_4090357_z2qpnic06um.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: transparent;
        }

        .menu {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            position: absolute;
            z-index: 1000;
            width: 60px;
            height: 60px;
            background-color: #303640;
            color: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 1.25s;
        }

        .btn i {
            font-size: 32px;
        }


        .menu span {
            /* 基本大小 */
            width: 40px;
            height: 40px;
            background-color: #303640;
            color: var(--clr);
            border: 2px solid var(--clr);
            position: absolute;
            left: 0;
            /* 居中圆角 */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            cursor: pointer;

            transform-origin: 100px;
            transition: .5s;
            transition-delay: calc(.1s * var(--i));
            transform: rotate(0deg) translateX(80px);
        }

        /* hover旋转的效果 */
        .menu:hover span {
            transform: rotate(calc(360deg / 8 * var(--i)));
        }

        /* 调整图标角度，保证旋转后是正的 */
        .menu span i {
            transform: rotate(calc(360deg / -8 * var(--i)));
        }

        .menu:hover .btn {
            transform: rotate(315deg);
        }

        .menu span:hover {
            background: var(--clr);
            color: #333;
            box-shadow: 0 0 10px var(--clr),
            0 0 30px var(--clr),
            0 0 50px var(--clr);
            transition: 0s;
        }


    </style>
</head>
<body>
<div class="menu active">
    <div class="btn"><i class="iconfont icon-add"></i></div>
    <span id="homeButton" onclick=window.parent.location.href="welcome.html" style="--i:0;--clr: #ff2972;">
      <i class="iconfont icon-home"></i>
    </span>
    <span id="moreButton" onclick=window.parent.location.href="upload.html" style="--i:1;--clr: #fee800;">
      <i class="iconfont icon-more"></i>
    </span>
    <span id="giftButton" onclick=window.parent.location.href="upload.html" style="--i:2;--clr: #04fc43;">
      <i class="iconfont icon-gift"></i>
    </span>
    <span id="settingButton" onclick=window.parent.location.href="upload.html" style="--i:3;--clr: #fe00f1;">
      <i class="iconfont icon-setting"></i>
    </span>
    <span id="messageButton" onclick=window.parent.location.href="upload.html" style="--i:4;--clr: #00b0fe;">
      <i class="iconfont icon-message"></i>
    </span>
    <span id="cartButton" onclick=window.parent.location.href="shopcar.jsp" style="--i:5;--clr: #fea600;">
      <i class="iconfont icon-cart"></i>
    </span>

    <span id="moneyButton" onclick=window.parent.location.href="upload.html" style="--i:6;--clr: #a529ff;">
      <i class="iconfont icon-money"></i>
    </span>
    <span id="starButton" onclick=window.parent.location.href="RegisterTransitionInterface.html" style="--i:7;--clr: #01bdab;">
      <i class="iconfont icon-star"></i>
    </span>
</div>

</body>
<script>
    // 在iframe内的JavaScript代码
    const homeButton = document.getElementById('homeButton');

    homeButton.addEventListener('click', () => {
        const message = {
            type: 'buttonClick',
            data: 'Home button clicked in iframe'
        };

        window.parent.postMessage(message, '*');
    });
    const CartButton = document.getElementById('cartButton');

    CartButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'CartButtonClick',
            data: 'Cart button clicked in iframe'
        };
    });
    const moreButton = document.getElementById('moreButton');

    moreButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'moreButtonClick',
            data: 'More button clicked in iframe'
        };
    });
    const giftButton = document.getElementById('giftButton');

    giftButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'giftButtonClick',
            data: 'Gift button clicked in iframe'
        };
    });
    const settingButton = document.getElementById('settingButton');

    settingButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'settingButtonClick',
            data: 'Setting button clicked in iframe'
        };
    });
    const messageButton = document.getElementById('messageButton');

    messageButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'messageButtonClick',
            data: 'Message button clicked in iframe'
        };
    });
    const moneyButton = document.getElementById('moneyButton');

    moneyButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'moneyButtonClick',
            data: 'Money button clicked in iframe'
        };
    });
    const starButton = document.getElementById('starButton');

    starButton.addEventListener('click', () => {
        const CartMessage = {
            type: 'starButtonClick',
            data: 'Star button clicked in iframe'
        };
    });
</script>
</html>